import React from 'react';
import './index.css';
import moment from 'moment';
import { Tag } from 'antd';
import { Link } from 'react-router-dom';

interface IProps extends ITopic {}

const tabType = new Map([
  ['share', '分享'],
  ['ask', '问答'],
  ['job', '招聘'],
]);

const TopicItem: React.FunctionComponent<IProps> = (props) => {
  const {
    id,
    author,
    last_reply_at,
    title,
    visit_count,
    reply_count,
    top,
    good,
    tab,
  } = props;
  return (
    <div className="topic-list-item">
      <div className="main-info">
        <Link to={`/user/${author.loginname}`}>
          <img src={author.avatar_url} alt={author.loginname} />
        </Link>
        {top ? (
          <Tag color="green">置顶</Tag>
        ) : good ? (
          <Tag color="green">精华</Tag>
        ) : (
          <Tag>{tabType.get(tab) as string}</Tag>
        )}
        <p className="title">
          <Link className="title-link" to={`topic/${id}`}>
            {title}
          </Link>
        </p>
      </div>
      <div className="last-reply">
        <p className="topic-info">
          <span>阅读：{visit_count}</span>
          <span>回复：{reply_count}</span>
        </p>
        <p className="time">
          {moment(last_reply_at, 'YYYY-MM-DD').startOf('day').fromNow()}
        </p>
      </div>
    </div>
  );
};

export default TopicItem;
